<template>
	<view class="content">
		<view class="tab-wrapper">
			<button class="plain-btn">
				<image class="avatar" :src="user.avatar || '/static/image/logo.png'">
			</button>
			<button class="plain-btn grade" @click="handleGrade">{{ grade.value }}<image class="grade__arrow" src="@/static/image/down.png"></button>
			<view class="tab">
				<view class="tab-item" v-for="item in tabList" :key="item.title" @click="handleTab(item)">
					<text :class="['tab-item__title', item.active ? 'tab-item__title-active' : '']">{{ item.title }}</text>
					<view :class="['tab-item__sts', item.active ? 'tab-item__sts-active' : '']"></view>	
				</view>
			</view>
		</view>
		<view v-if="isLogin" class="lastest">
			<view class="lastest__title">上次学习</view>
			<view class="lastest__item" v-for="item in lastestRecordList" :key="item.uuid">
				<view class="lastest__item__desc">
					<text class="lastest__item__type">{{ item.typeName }}</text>
					<view  class="lastest__item__cont">
						<text v-if="item.chapter_name" class="lastest__item__cont__unit"> {{ item.chapter_name }} </text>
						<text v-else class="lastest__item__cont__content">{{ item.content }}</text>
					</view>
				</view>
				<navigator v-if="item.type === 'TeachingMaterial'" class="lastest__navigator" :url="`/pagesA/teaching/detail?name={{item.chapter_name}}&id={{item.id}}&uuid={{item.chapter_uuid}}`">继续学习</navigator>
				<navigator v-else-if="item.type === 'ZJLX'" class="lastest__navigator" :url="`/pagesA/paper/detail?name={{item.chapter_name}}&uuid={{item.uuid}}`">继续学习</navigator>	
			</view>
		</view>
		<tree :treeData="teachingMaterialList" @node-click="handleNode" v-if="teachingMaterialList.length > 0"/>
		<view style="height: 10rpx;"></view>
		<uni-popup ref="popup" type="bottom" background-color="white">
			<view class="cfg-toolbar">
				<button @click="handleClosePopup" class="plain-btn sure">确定</button>
			</view>
			<view class="cfg__wrapper">
				<view class="cfg__title">年级</view>
				<view class="cfg__con">
					<button @click="handleCfg(item, 'grade')" :class="['cfg__con__item', 'plain-btn', item.key === grade.key ? 'cfg__con__item-selected' : '']" v-for="item in gradeList" :key="item.uuid">{{ item.value }}</button>
				</view>
				<view class="cfg__title">版本</view>
				<view class="cfg__con">
					<button @click="handleCfg(item, 'version')" :class="['cfg__con__item', 'plain-btn', item.key === version.key ? 'cfg__con__item-selected' : '']" v-for="item in versionList" :key="item.uuid">{{ item.value }}</button>
				</view>
				<view class="cfg__title">册别</view>
				<view class="cfg__con">
					<button @click="handleCfg(item, 'volume')" :class="['cfg__con__item', 'plain-btn', item.key === volume.key ? 'cfg__con__item-selected' : '']" v-for="item in volumeList" :key="item.uuid">{{ item.value }}</button>
				</view>
			</view>
		</uni-popup>
		<login v-if="isShowLoginAllow && isShowLogin" @close="isShowLoginAllow = false, isShowLogin = false" @success="handleLoginSuccess"/>
	</view>
</template>

<script>
import { login } from "@/api/wxuser.js";
import { list as configList } from "@/api/sysConfig.js";
import { lastest as recordLastest } from "@/api/record.js";
import { tree as chapterTree } from "@/api/chapter.js";
import { setCache, getCache } from "@/util/index.js";
import Tree from "@/components/tree.vue";
import Login from "@/components/login.vue";

export default {
	components: { 
		Tree,
		Login,
	},
	data() {
		return {
			isLogin: false,
			user: {
				avatar: "",
				id: 0,
				user_nickname: "",
			},
			grade: {
				value: '',
				key: '',
			},
			volume: {
				value: '',
				key: '',
			},
			version: {
				value: '',
				key: '',
			},
			tabList: [{
				title: '教材',
				active: true,
			}, {
				title: '资料',
				active: false,
			}, {
				title: '词汇',
				active: false,
			}, {
				title: '语法',
				active: false,
			}, {
				title: '佳句',
				active: false,
			}, {
				title: '佳作',
				active: false,
			}],
			teachingMaterialList: [],
			lastestRecordList: [],
			gradeList: [],
			versionList: [],
			volumeList: [],
			isShowLogin: false,
			isShowLoginAllow: true,
		}
	},
	onShow() {
		console.warn('onShow');
		this.refreshData();
	},
	methods: {
		refreshCache() {
			return Promise.all([
				getCache('user_info'), 
				getCache('grade'), 
				getCache('version'),
				getCache('volume'),
				getCache('gradeList'),
				getCache('versionList'), 
				getCache('volumeList')
			]).then(([usrRes, grade, version, volume,
				gradeList, versionList, volumeList]) => {
				this.isLogin = !!usrRes;
				Object.assign(this.user, usrRes || {});
				Object.assign(this.grade, grade || { key: 'senior1', value: '高一', });
				Object.assign(this.version, version || { key: 'people', value: '人教版', });
				Object.assign(this.volume, volume || { key: 'prev', value: '上册', });
				// 参数需要提供一个默认值
				gradeList && this.gradeList.splice(0, this.gradeList.length, ...gradeList);
				versionList && this.versionList.splice(0, this.versionList.length, ...versionList);
				volumeList && this.volumeList.splice(0, this.volumeList.length, ...volumeList);
			}).catch(console.warn);
		},
		handleTab(item) {
			// this.tabList.forEach((fitem) => fitem.active = fitem === item);
			if (item.title === '佳句') {
				console.warn(item);
				uni.navigateTo({
					url: '/pages/learn/sentence'
				});
			}
		},
		handleGrade() {
			this.$refs.popup.open();
		},
		handleNode(node) {
			console.warn(node);
		},
		getConfig() {
			return configList().then(({ GRADE, TEXTBOOK_VERSION, TEXTBOOK_VOLUME }) => {
				setCache('gradeList', GRADE);
				setCache('versionList', TEXTBOOK_VERSION);
				setCache('volumeList', TEXTBOOK_VOLUME);
			}).catch(console.warn);
		},
		getRecordLastest() {
			return recordLastest({
				uid: this.user.id
			}).then((res) => {
				this.lastestRecordList.splice(0, this.lastestRecordList.length, ...res);
			}).catch(({ code }) => {
				if (code === 10001) {
					this.isShowLogin = true;
				}
			});
		},
		handleCfg(item, key) {
			Object.assign(this[key], item);
			setCache(key, item).catch(console.warn);
		},
		handleClosePopup() {
			this.$refs.popup.close();
			this.getChapterTree();
		},
		getChapterTree() {
			return chapterTree({
				grade: this.grade.key,
				version: this.version.key,
				volume: this.volume.key,
				subject: 'english',
				material_type: 'teach',
			}).then((res) => {
				this.teachingMaterialList.splice(0, this.teachingMaterialList.length, ...res);
			}).catch(console.warn);
		},
		refreshData() {
			this.getConfig().then(() => {
				return this.refreshCache();
			}).then(() => {
				if (this.teachingMaterialList.length <= 0) {
					this.getChapterTree();
				}
				this.getRecordLastest();
			});
		},
		handleLoginSuccess() {
			this.isShowLoginAllow = false;
			this.isShowLogin = false;
			this.refreshData();
		},
	
	}
}

</script>

<style lang="scss" scoped>
	.content {
	}
	.tab-wrapper {
		display: flex;
		padding-left: 6rpx;
	}
	.plain-btn {
		border: none;
		outline: none;
		display: inline-flex;
		padding: 0;
		line-height: normal;
		border-radius: none;
		align-items: center;
		flex: none;
		margin: 0;
		&::after {
			content: none;
		}
	}
	
	.avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
	.grade {
		font-size: 30rpx;
		margin-left: 20rpx;
		&__arrow {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.tab {
		flex: 1;
		display: flex;
		font-size: 34rpx;
		overflow: auto;
		&-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			white-space: nowrap;
			display: flex;
			flex-direction: column;
			&__title {
				&-active {
					color: $km-primary-color;
				}
			}
			&__sts {
				height: 5rpx;
				&-active {
					background-color: $km-primary-color;
				}
			}
		}
	}
	.lastest {
		background-color: white;
		margin: 20rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 32rpx;
		color: #333;
		&__title {
			padding: 10rpx;
			border-bottom: 2rpx solid $km-backound-color;
		}
		
		&__item {
			display: flex;
			font-size: 28rpx;
			justify-content: center;
			align-items: center;
			padding: 15rpx;
			&:nth-child(n+1) {
				border-top: 2rpx solid $km-backound-color;
			}
			&:active {
				background-color: $km-backound-color;
			}
			&__desc {
				flex: 1;
				display: flex;
				flex-direction: column;
			}
		}
	}
	.cfg__wrapper {
		padding: 0 20rpx 20rpx;
		font-size: 30rpx;
		.cfg__title {
			padding: 10rpx;
			&:nth-child(n+1) {
				margin-top: 10rpx;
			}
		}
		.cfg__con {
			&__item {
				font-size: 26rpx;
				border: 1rpx solid lightgray;
				margin-left: 20rpx;
				margin-right: 20rpx;
				padding: 5rpx 30rpx;
				background-color: transparent;
				&:active {
					background-color: lightgray;
				}
				&-selected {
					border-color: $km-primary-color;
					color: $km-primary-color;
				}
			}
		}
	}
	.cfg-toolbar {
		text-align: right;
		padding: 15rpx 15rpx 0;
		.sure {
			font-size: 30rpx;
		}
	}
</style>
